<template>
<!--    发动态-->
    <div class="box">
        <textarea rows="2" cols="20" v-model="textarea" placeholder="说点儿什么吧"></textarea>
        <div class="myimg" v-show="ispicture">
            <i class="el-icon-picture"></i>
            <div class="imgbox">
                <img :src="picture" alt="" id="imgpicture">
            </div>
        </div>
        <div style="overflow: hidden;margin-top: 10px;margin-left: 10px">
            <input type="file" enctype="multipart/form-data" ref="file" value=""/>
            <el-button type="primary" @click="tupian" size="mini">确定</el-button>
        </div>
        <div style="overflow: hidden">
            <el-button type="primary" class="send" @click="send">发表</el-button>
        </div>

    </div>
</template>

<script>
    import $ from 'jquery'
    import {addarticle, addarticle1} from '../api/api'
    export default {
        name: "published",
        data(){
            return {
                textarea: '',
                picture:'',
                ispicture:false
            }
        },
        methods:{
            tupian(){
                // console.log(this.$refs.file.files[0])
                var file = new FormData()
                file.append('img',this.$refs.file.files[0])
                $.ajax({
                    url:'http://127.0.0.1:3007/api/uploadImg',
                    type: 'post',
                    data:file,
                    contentType: false,
                    processData: false,
                    success:res=>{
                        // console.log(res)
                        if(res.code == 200){
                            this.picture = 'http://127.0.0.1:3007/uploads/'+res.data
                            this.ispicture = true
                        }
                    }
                })
            },
            send(){
                if(this.picture == ''){
                    addarticle(this.textarea).then(res=>{
                        // console.log(res)
                        if(res.status == 0){
                            this.$message({
                                showClose: true,
                                message: '发表成功',
                                type: 'success'
                            });
                            this.$router.go(0)
                        }
                    })
                }else {
                    addarticle1(this.textarea, this.picture).then(res=>{
                        if(res.status == 0){
                            this.$message({
                                showClose: true,
                                message: '发表成功',
                                type: 'success'
                            });
                            this.$router.go(0)
                        }
                    })
                }

            }
        }
    }
</script>

<style scoped>
    .box {
        background-color: white;
        padding: 10px;
        border: 1px solid #c7e5eb;
        box-sizing: border-box;

    }
    textarea {
        width: 100%;
        height: 80px;
        resize: none;
        text-indent: 1em;
        outline: 0;
        border: 1px solid #c7e5eb;
        padding-top: 5px;
        box-sizing: border-box;
    }
    .myimg {
        margin-top: -5px;
        width: 100%;
        padding: 10px;
        border-bottom: 1px solid #c7e5eb;
        box-sizing: border-box;
    }
    .imgbox {
        width: 200px;
        height: 200px;
        background-color: skyblue;
    }
    .imgbox>img {
        width: 100%;
        height: 100%;
    }
    .send {
        float: right;
        margin-right: 20px;
    }
</style>
